<template>
	<view>
		<u-navbar title="新增收款方式"></u-navbar>
		<view class="u-p-30 bg-white">
			<view>
				<text class="u-font-32 text-bold">选择收款方式</text>
			</view>
			<view class="ways">
				<view v-for="(item,index) in modes" :key="index" class="item" :class="{cur:curWay == item.value}" @tap="changeWay(item.value)">
					<view class="icon u-font-50" :class="item.class">
					</view>
					<view class="label">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="u-m-t-20 cash-img-wrap" v-if="curWay==1">
				<view class="info">
					<view class="u-font-32 text-block text-bold">
						请上传您的支付宝收款码
					</view>
					<view class="text-gray u-font-24 u-m-t-10">
						请勿上传截图的收款码，请在二维码收款界面，点击保存收款码，上传图片
					</view>
				</view>
				<view class="media">
					<view class="img-box" v-if="img">
						<image class="img" :src="img.localUrl||img.mediaUrl" mode="aspectFill"></image>
						<view class="progress" v-if="!img.finished">
							<view class="progress-actived" :style="{width:`${img.percent}%`}" />
						</view>
						<text class="remove bg-red cuIcon-add" @tap.stop="delImg"></text>
					</view>
					<view class="place-box" v-else="img" @tap="chooseImg">
						<view class="iconfont icon-increase u-font-60 text-grey">
						
						</view>
						<view class="u-font-24 u-m-t-6 text-grey">
							点击上传
						</view>
					</view>
				</view>
			</view>
			<view class="u-m-t-20 cash-img-wrap" v-if="curWay==2">
				<view class="info">
					<view class="u-font-32 text-block text-bold">
						请上传您的微信收款码
					</view>
					<view class="text-gray u-font-24 u-m-t-10">
						请勿上传截图的收款码，请在二维码收款界面，点击保存收款码，上传图片
					</view>
				</view>
				<view class="media">
					<view class="img-box" v-if="img">
						<image class="img" :src="img.localUrl||img.mediaUrl" mode="aspectFill"></image>
						<view class="progress" v-if="!img.finished">
							<view class="progress-actived" :style="{width:`${img.percent}%`}" />
						</view>
						<text class="remove bg-red cuIcon-add" @tap.stop="delImg"></text>
					</view>
					<view class="place-box" v-else="img" @tap="chooseImg">
						<view class="iconfont icon-increase u-font-60 text-grey">
						
						</view>
						<view class="u-font-24 u-m-t-6 text-grey">
							点击上传
						</view>
					</view>
				</view>
			</view>
			<view class="u-m-t-20 cash-img-wrap" v-if="curWay==3">
				<view class="info">
					<view class="u-font-32 text-block text-bold">
						请上传您的银行卡收款码
					</view>
					<view class="text-gray u-font-24 u-m-t-10">
						请勿上传截图的收款码，请在二维码收款界面，点击保存收款码，上传图片
					</view>
				</view>
				<view class="media">
					<view class="img-box" v-if="img">
						<image class="img" :src="img.localUrl||img.mediaUrl" mode="aspectFill"></image>
						<view class="progress" v-if="!img.finished">
							<view class="progress-actived" :style="{width:`${img.percent}%`}" />
						</view>
						<text class="remove bg-red cuIcon-add" @tap.stop="delImg"></text>
					</view>
					<view class="place-box" v-else="img" @tap="chooseImg">
						<view class="iconfont icon-increase u-font-60 text-grey">
						
						</view>
						<view class="u-font-24 u-m-t-6 text-grey">
							点击上传
						</view>
					</view>
				</view>
			</view>
			<view class="u-m-t-20 cash-img-wrap" v-if="curWay==4">
				<view class="info">
					<view class="u-font-32 text-block text-bold">
						请上传您的USDT收款码
					</view>
					<view class="text-gray u-font-24 u-m-t-10">
						请勿上传截图的收款码，请在二维码收款界面，点击保存收款码，上传图片
					</view>
				</view>
				<view class="media">
					<view class="img-box" v-if="img">
						<image class="img" :src="img.localUrl||img.mediaUrl" mode="aspectFill"></image>
						<view class="progress" v-if="!img.finished">
							<view class="progress-actived" :style="{width:`${img.percent}%`}" />
						</view>
						<text class="remove bg-red cuIcon-add" @tap.stop="delImg"></text>
					</view>
					<view class="place-box" v-else="img" @tap="chooseImg">
						<view class="iconfont icon-increase u-font-60 text-grey">
						
						</view>
						<view class="u-font-24 u-m-t-6 text-grey">
							点击上传
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="form u-m-t-20" v-if="curWay==3">
			<view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>持卡人姓名</text>
					<text class="text-red">*</text>
				</view>
				<view class="main">
					<input class="text-right" placeholder-class="text-gray" type="text" v-model="cardUserName" placeholder="请输入姓名"/>
				</view>
			</view>
			<view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>银行卡号</text>
					<text class="text-red">*</text>
				</view>
				<view class="main">
					<input class="text-right" placeholder-class="text-gray" type="text" v-model="cardNum" placeholder="请输入银行卡号"/>
				</view>
			</view>
			<view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>开户银行</text>
					<text class="text-red">*</text>
				</view>
				<view class="main">
					<input class="text-right" placeholder-class="text-gray" type="text" v-model="cardName" placeholder="请输入开户银行"/>
				</view>
			</view>
			<!-- <view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>开户支行(选填)</text>
				</view>
				<view class="main">
					<input class="text-right" placeholder-class="text-gray" type="text" placeholder="请输入开户支行"/>
				</view>
			</view> -->
			<view class="submit bg-blue u-m-x-30 u-m-t-50" @tap="cardSubmit">
				确定
			</view>
		</view>
		<view class="form u-m-t-20" v-if="curWay==1">
			<!-- <view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>支付宝实名</text>
					<text class="text-red">*</text>
				</view>
				<view class="main">
					<input class="text-right" placeholder-class="text-gray" type="text" placeholder="请输入支付宝实名"/>
				</view>
			</view> -->
			<view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>支付宝姓名</text>
					<text class="text-red">*</text>
				</view>
				<view class="main">
					<input class="text-right" placeholder-class="text-gray" type="text" v-model="cardUserName" placeholder="请输入实名制名字"/>
				</view>
			</view>
			<view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>支付宝账号</text>
					<text class="text-red">*</text>
				</view>
				<view class="main">
					<input class="text-right" placeholder-class="text-gray" type="text" v-model="cardNum" placeholder="请输入支付宝账号"/>
				</view>
			</view>
			<view class="submit bg-blue u-m-x-30 u-m-t-50" @tap="alipaySubmit">
				确定
			</view>
		</view>
		<view class="form u-m-t-20" v-if="curWay==2">
			<view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>微信姓名</text>
					<text class="text-red">*</text>
				</view>
				<view class="main">
					<input class="text-right" placeholder-class="text-gray" type="text" v-model="cardUserName" placeholder="请输入实名制名字"/>
				</view>
			</view>
			<view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>微信号</text>
					<text class="text-red">*</text>
				</view>
				<view class="main">
					<input class="text-right" placeholder-class="text-gray" type="text" v-model="cardNum" placeholder="请输入微信号"/>
				</view>
			</view>
			<view class="submit bg-blue u-m-x-30 u-m-t-50" @tap="wxpaySubmit">
				确定
			</view>
		</view>
		<view class="form u-m-t-20" v-if="curWay==4">
			<view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>网络</text>
					<text class="text-red">*</text>
				</view>
				<view class="main">
					<!-- TRC20 -->
					<input value="TRC20" disabled class="text-right" placeholder-class="text-gray" type="text" placeholder="请输入网络"/>
				</view>
			</view>
			<view class="group u-border-bottom">
				<view class="label u-font-32">
					<text>地址</text>
					<text class="text-red">*</text>
				</view>
				<view class="main">
					<input class="text-right" placeholder-class="text-gray" type="text" v-model="cardNum" placeholder="请输入地址"/>
				</view>
			</view>
			<view class="submit bg-blue u-m-x-30 u-m-t-50" @tap="usdtSumit">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {getDict} from "@/api/system.js"
	import {mapGetters} from "vuex"
	import {get as getStorage,set as setStorage} from "@/utils/storage.js"
	import { delay, goback, toast } from "@/utils/util";
	import { chooseImage, previewImage, uploadFile } from "@/utils/file";
	const cacheKey = 'cat_cash_ways_'
	
	
	
	
	
	export default {
		data() {
			return {
				modes:[],
				curWay:0,
				wayList:[],
				cardUserName:'',
				cardNum:'',
				cardName:'',
				img:null
				
				
				
				
				
				
			};
		},
		computed:{
			...mapGetters('user',['userId'])
		},
		onLoad() {
			getStorage(cacheKey+this.userId).then((ways)=>{
				this.wayList = ways||[]
			})
			const dictMap = {
				bank:{
					class:'cuIcon-card text-blue',
					name:'银行卡',
					value:3,
				},
				USDT:{
					class:'iconfont icon-walletfill text-orange',
					name:'USDT',
					value:4,
				},
				alipay:{
					class:'iconfont icon-alipay text-blue',
					name:'支付宝',
					value:1,
				},
				weixin:{
					class:'iconfont icon-wxpay text-green',
					name:'微信',
					value:2,
				}
			}
			getDict('cat_show_withdrawal_method').then((list)=>{
				this.modes = list.reduce((arr,{dictLabel,dictValue})=>{
					if(dictValue=='1'){
						arr.push({
							...dictMap[dictLabel]
						})
					}
					return arr
				},[])
				this.curWay = this.modes.length?this.modes[0].value:0
			})
		},
		methods: {
			changeWay(way) {
				if(this.curWay == way){
					return
				}
				this.curWay = way
			},
			async chooseImg(){
				const {tempFiles:[file]} = await chooseImage({count:1})
				this.img = {
					mediaUrl:'',
					localUrl:file.path,
					percent:0,
					finished:false
				}
				try{
					this.img.mediaUrl = await uploadFile({
						file: file,
						onProgressUpdate: ({
							progress
						}) => {
							this.img.percent = progress;
						}
					})
					this.img.finished = true
				}catch(e){
					toast('图片上传失败,请重试')
					this.img = null
				}
			},
			async delImg(){
				this.img = null
			},
			viewImg(){
				previewImage({
					current:0,
					urls:[this.img.localUrl||this.img.mediaUrl]
				})
			},
			checkImg(){
				if(this.img&&!this.img.finished){
					throw new Error('图片正在上传中,请稍后')
				}
			},
			async cardSubmit(){
				try{
					this.checkImg()
					if(!this.cardUserName){
						throw new Error('请输入持卡人姓名')
					}
					if(!this.cardNum){
						throw new Error('请输入银行卡号')
					}
					if(!this.cardName){
						throw new Error('请输入开户银行')
					}
				}catch(e){
					return toast(e.message)
				}
				this.wayList = this.wayList.filter(({cardNum})=>cardNum!=this.cardNum)
				this.wayList.unshift({
					wayName:'银行卡',
					label:`${this.cardName}(${this.cardNum.slice(-4)})`,
					cardNum:this.cardNum,
					cardUserName:this.cardUserName,
					cardName:this.cardName,
					extractForm:3,
					mediaUrl:this.img?this.img.mediaUrl:''
				})
				await setStorage(cacheKey+this.userId,this.wayList)
				toast('添加成功')
				await delay(1000)
				goback()
			},
			async alipaySubmit(){
				try{
					this.checkImg()
					if(!this.cardUserName){
						throw new Error('请输入支付宝姓名')
					}
					if(!this.cardNum){
						throw new Error('请输入支付宝账号')
					}
				}catch(e){
					return toast(e.message)
				}
				this.wayList = this.wayList.filter(({cardNum})=>cardNum!=this.cardNum)
				this.wayList.unshift({
					wayName:'支付宝',
					label:`${this.cardUserName}(${this.cardNum.slice(-4)})`,
					cardNum:this.cardNum,
					cardUserName:this.cardUserName,
					extractForm:1,
					mediaUrl:this.img?this.img.mediaUrl:''
				})
				await setStorage(cacheKey+this.userId,this.wayList)
				toast('添加成功')
				await delay(1000)
				goback()
			},
			async wxpaySubmit(){
				try{
					this.checkImg()
					if(!this.cardUserName){
						throw new Error('请输入微信姓名')
					}
					if(!this.cardNum){
						throw new Error('请输入微信号')
					}
				}catch(e){
					return toast(e.message)
				}
				this.wayList = this.wayList.filter(({cardNum})=>cardNum!=this.cardNum)
				this.wayList.unshift({
					wayName:'微信',
					label:`${this.cardUserName}(${this.cardNum.slice(-4)})`,
					cardNum:this.cardNum,
					cardUserName:this.cardUserName,
					extractForm:2,
					mediaUrl:this.img?this.img.mediaUrl:''
				})
				await setStorage(cacheKey+this.userId,this.wayList)
				toast('添加成功')
				await delay(1000)
				goback()
			},
			async usdtSumit(){
				try{
					this.checkImg()
					if(!this.cardNum){
						throw new Error('请输入地址')
					}
				}catch(e){
					return toast(e.message)
				}
				this.wayList = this.wayList.filter(({cardNum})=>cardNum!=this.cardNum)
				this.wayList.unshift({
					wayName:'USDT',
					label:`TRC20(${this.cardNum.slice(-4)})`,
					cardNum:this.cardNum,
					cardUserName:'TRC20',
					extractForm:4,
					mediaUrl:this.img?this.img.mediaUrl:''
				})
				await setStorage(cacheKey+this.userId,this.wayList)
				toast('添加成功')
				await delay(1000)
				goback()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.ways{
		display: flex;
		flex-wrap: wrap;
		.item{
			width: calc((100% - 60rpx)/3);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			border:4rpx solid #cccccc;
			padding: 14rpx 0rpx;
			margin-top: 20rpx;
			background-color: #F5F6F7;
			&+.item{
				margin-left: 30rpx;
			}
			&:nth-child(3n-2){
				margin-left: 0;
			}
			&.cur{
				border-color: #0081ff;
				position: relative;
				&::before{
					content: '';
					position: absolute;
					right: 0;
					bottom: 0;
					border-top: 22rpx solid transparent;
					border-left: 22rpx solid transparent;
					border-right: 22rpx solid #0081ff;
					border-bottom: 22rpx solid #0081ff;
				}
				&::after{
					font-family: 'iconfont';
					content: "\e618";
					color: #ffffff;
					position: absolute;
					right: 0;
					bottom: 0;
					font-size: 24rpx;
				}
			}
		}
		.icon{
			margin-right: 14rpx;
			line-height: 1;
		}
		.label{
			font-size: 32rpx;
			line-height: 1;
		}
	}
	.cash-img-wrap{
		display: flex;
		align-items: center;
		border: 4rpx dashed #eeeeee;
		padding: 20rpx 20rpx 20rpx 30rpx;
		border-radius: 20rpx;
		.info{
			flex: 1;
			width: 100rpx;
		}
		.media{
			width: 180rpx;
			height: 180rpx;
			background-color: #eeeeee;
			border-radius: 10rpx;
			margin-left: 30rpx;
			flex-shrink: 0;
			position: relative;
		}
		.place-box{
			width:100%;
			height:100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.img-box{
			width:100%;
			height:100%;
			position: absolute;
			top: 0;
			left: 0;
			.img{
				width:100%;
				height:100%;
				border-radius: 10rpx;
			}
			.progress{
				position: absolute;
				top: 50%;
				left: 14rpx;
				right: 14rpx;
				height: 16rpx;
				background-color: #eeeeee;
				.progress-actived{
					width: 0%;
					height: 100%;
					background-color: #0081ff;
				}
			}
			.remove{
				position: absolute;
				top: 0;
				right: 0;
				padding: 2rpx;
				border-radius: 100rpx;
				transform: translate(25%,-25%) rotate(45deg);
				font-size: 28rpx;
			}
		}
	}
	.form{
		.group{
			display: flex;
			padding: 24rpx 30rpx;
			background-color: #ffffff;
		}
		.main{
			flex: 1;
			display: flex;
			justify-content: flex-end;
		}
		.submit{
			border-radius: 20rpx;
			padding: 30rpx;
			text-align: center;
		}
	}
</style>
